<template>
	<div class="container">
		<!-- <navigationBar title="修改用户名"></navigationBar> -->
		<div class="content">
			<div class="page-main">
				<div class="cell">
					<div class="warp"><input type="text" :password="false" placeholder="用户的昵称内容" placeholder-style="" v-model="userInfo.nickname" /></div>
					<div class="num"><span v-if="userInfo.nickname">{{userInfo.nickname.length}}</span><span v-else>0</span>/20</div>
				</div>
				<div class="footer">
					<div class="submit-btn" @click="submitForm">保存</div>
				</div>
				
			</div>
		</div>
	</div>
</template>

<script>
import data from '@/js/my/editNickname/data.js';
import methods from '@/js/my/editNickname/methods.js';
import { mapState } from 'vuex';
import navigationBar from '../../components/navigationBar.vue';
export default {
	data,
	methods,
	onLoad() {},
	onShow() {},
	onHide() {},
	components: {
		navigationBar
	},
	computed: {
		...mapState(['navigationBarHeight', 'userInfo'])
	}
};
</script>

<style scoped lang="scss">
@import '~@/style/my/editNickname.scss';
</style>
